<template>
  <div style="max-width: 900px; margin: 0 auto">
    <div>基本信息</div>
    <div>
      <el-row class="detailRow">
        <el-col span="12" class="detail_form_item"
        >Offer名 : {{ basicInfo.offerName }}
        </el-col>
        <el-col span="12" class="detail_form_item"
        >提交人 : {{ basicInfo.username }}
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row class="detailRow">
        <div style="display: flex">
          <div style="text-align: center; width: 20%">
            <div class="basicInfo_table_title"></div>
            <div class="basicInfo_table_title">图片</div>
            <div class="basicInfo_table_title">视频</div>
          </div>
          <div
            v-for="(item, index) in basicInfo.countInfo.platform"
            :key="index"
            :style="{
              width: 100 / (basicInfo.countInfo.platform.length + 1) + '%',
            }"
            style="text-align: center"
          >
            <div
              class="basicInfo_table_column"
              style="background-color: #fafafa; font-weight: 600"
            >
              {{ item }}
            </div>
            <div class="basicInfo_table_column">
              {{ basicInfo.countInfo.img[index] }}
            </div>
            <div class="basicInfo_table_column">
              {{ basicInfo.countInfo.vid[index] }}
            </div>
          </div>
        </div>
      </el-row>
      <el-row :gutter="20">
        <el-col span="12" offset="2" v-if="showAssessor">
          外部审核人: {{ basicInfo.customerName  }}
        </el-col>
      </el-row>
      <el-row v-if="useType !== 'add'" class="detailRow">
        <el-col span="12" class="detail_form_item"
        >审核人 : {{   /*basicInfo.auditCreative === 1 ? basicInfo.customerName : */basicInfo.auditor }}
        </el-col>
        <el-col span="12" class="detail_form_item"
        >审核清单 : {{ basicInfo.auditId }}
        </el-col>
      </el-row>
      <el-row class="detailRow">
        <div>
          <span>素材</span>
        </div>
        <div class="creative_border">
          <div
            v-for="(item, index) in creativeInfo"
            :key="index"
            class="creative_item"
            style="position: relative"
          >
            <div class="create-url" style="margin-top: 10px">
              <img
                v-if="item.type == '0'"
                style="
                  height: auto;
                  width: 100%;
                  max-height: 100%;
                  max-width: 100%;
                "
                :src="item.waterUrl"
                @click="openCreativeDetail(item.type, item.waterUrl)"
              />
              <video
                v-if="item.type == '1'"
                style="
                  height: auto;
                  width: 100%;
                  max-height: 100%;
                  max-width: 100%;
                "
                :src="item.waterUrl"
                @click="openCreativeDetail(item.type, item.waterUrl)"
              ></video>
            </div>
            <div class="create-detail">
              <div style="margin-top: 10px">设计师 : {{  designerChange(item.designer) }}</div>
              <div style="margin-top: 10px">媒体 : {{ item.platform }}</div>
              <div style="margin-top: 10px">设计思路 : {{ item.thought }}</div>
            </div>
            <div
              v-if="useType === 'check' || useType === 'examine'"
              class="create-detail"
            >
              <div style="margin-top: 10px; margin-bottom: 5px">评论</div>
              <el-input
                id="id-offer-componets-origincreativeauditdetail-comments"
                :disabled="useType === 'check'"
                v-model="item.comments"
                size="mini"
                type="textarea"
              ></el-input>
            </div>
            <div
              v-if="useType === 'examine'"
              class="create-detail"
              style="width: 40%"
            >
              <el-radio v-model="item.status" :label="2">同意</el-radio>
              <el-radio v-model="item.status" :label="3">拒绝</el-radio>
            </div>
            <el-button
              id="id-offer-componets-origincreativeauditdetail-delCreative"
              icon="el-icon-close"
              size="mini"
              circle
              v-if="useType !== 'check'"
              style="
                width: 30px;
                height: 30px;
                position: absolute;
                top: 3px;
                right: 0;
              "
              @click="delCreative(item.id)"
            ></el-button>
          </div>
        </div>
      </el-row>
      <el-row style="margin: 20px">
        <div
          style="margin: 0 auto"
          :style="{
            width:
              useType !== 'check' && useType !== 'examine' ? '150px' : '65px',
          }"
        >
          <el-button
            id="id-offer-componets-origincreativeauditdetail-submit"
            v-if="useType !== 'check'"
            type="primary"
            size="mini"
            @click="submit"
            :disabled="btnDisable"
          >提交
          </el-button>
        </div>
      </el-row>
    </div>
    <!--素材详细信息-->
    <el-dialog
      title="素材详细信息"
      :visible.sync="creativeDetail"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="handleDetailClose"
      :append-to-body="true"
      width="80%"
    >
      <div>
        <img
          v-show="detailType == '0'"
          :src="detailCreative"
          style="width: 100%; height: 100%"
        />
        <video
          v-show="detailType == '1'"
          ref="video"
          :src="detailCreative"
          style="width: 100%; height: 100%"
          controls="controls"
        ></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  outExamineSubmit,
  outExamineMain,
  outGetDesigner,
} from "@/api/offer/creativeaudit";

const statusList = [
  {label: "等待提交", value: 0},
  {label: "等待审核", value: 1},
  {label: "审核通过", value: 2},
  {label: "审核拒绝", value: 3},
  {label: "禁用", value: 4},
];
export default {
  name: "outCreativeAuditDetail",
  props: {
    useType: {
      type: String,
    },
    key: {
      type: String,
    },
  },
  data() {
    return {
      showAuditor: false,
      showAssessor: false,
      btnDisable: false, //提交不可选
      designerList: [], //设计师列表
      tableData: [],
      inside: "", //内部审核人
      insideList: [], //内部审核人列表
      auditCreative: 0, //是否选择内部审核员
      basicInfo: {
        countInfo: {
          platform: [],
          img: [],
          vid: [],
        },
      },
      creativeInfo: [],
      creativeDetail: false,
      loading: false,
      creativeList: [],
      detailCreative: "", //素材地址
      detailType: "", //素材类型
    };
  },
  created() {
    if (this.useType === "examine") {
      this.examineMainInit();
    }

    outGetDesigner(this.key).then((res) => {
      this.designerList = res.data.data;
    });
  },
  methods: {
    designerChange(val){
      val = val.split(',')
      let list = []
      this.designerList.map(item =>{
        val.map(i =>{
          if(i === item.id){
            list.push(item.realName)
          }
        })
      })
      return list.join(',')
    },
    examineMainInit() {
      outExamineMain({key: this.key}).then((res) => {
        this.basicInfo = res.data.data.basicInfo;
        this.insideList = res.data.data.basicInfo.auditorList;
        this.auditCreative = res.data.data.basicInfo.audit_creative;
        this.creativeInfo = res.data.data.creativeInfo;
        this.basicInfo["countInfo"] = {
          platform: [],
          img: [],
          vid: [],
        };
        this.dynamicNumber();
      });
    },
    //打开详细素材
    openCreativeDetail(type, url) {
      this.creativeDetail = true;
      this.detailCreative = url;
      this.detailType = type;
    },

    //删除素材
    delCreative(val) {
      if (
        (this.useType === "examine" || this.useType === "add") &&
        this.creativeInfo.length === 1
      ) {
        return;
      }
      this.creativeInfo.splice(
        this.creativeInfo.findIndex((item) => item.id === val),
        1
      );
      this.dynamicNumber();
    },

    //关闭详细素材窗口
    handleDetailClose() {
      this.creativeDetail = false;
      this.$refs.video.pause();
    },
    //修改审核状态
    changeStatus(val) {
      let status;
      statusList.map((item) => {
        if (item.value === val) {
          status = item.label;
        }
      });
      return status;
    },

    //动态获取图片视频数量
    dynamicNumber() {
      this.basicInfo.countInfo = {
        platform: [],
        vid: [],
        img: [],
      };
      this.creativeInfo.map((item) => {
        if (this.basicInfo.countInfo.platform.indexOf(item.platform) === -1) {
          this.basicInfo.countInfo.platform.push(item.platform);
        }
      });
      this.basicInfo.countInfo.platform.map((i) => {
        let vidLength = 0;
        let imgLength = 0;
        this.creativeInfo.map((item) => {
          if (i === item.platform) {
            if (item.type == 1) {
              vidLength++;
            }
            if (item.type == 0) {
              imgLength++;
            }
          }
        });
        this.basicInfo.countInfo.vid.push(vidLength);
        this.basicInfo.countInfo.img.push(imgLength);
      });
    },
    close() {
      this.$parent.handleClose();
    },
    //提交表单
    submit() {
      // 编辑提交
      switch (this.useType) {
        case "examine": {
          let success = true;
          for (let i in this.creativeInfo) {
            console.log(
              this.creativeInfo[i].status != 2 &&
              this.creativeInfo[i].status != 3
            );
            if (
              this.creativeInfo[i].status != 2 &&
              this.creativeInfo[i].status != 3
            ) {
              this.$message({
                type: "error",
                message: "请勾选状态!",
              });
              success = false;
            }
          }
          if (success) {
            let dataExamine = {
              key: this.key,
              creativeInfo: this.creativeInfo,
            };
            this.btnDisable = true;
            outExamineSubmit(dataExamine).then((res) => {
              if (res.data.success) {
                this.btnDisable = false;
                this.$message({
                  type: "success",
                  message: "提交成功",
                });
                setTimeout(()=>{
                  window.opener = null;
                  window.location.href = "about:blank";
                  window.close();
                },3000);
              }
            },(error)=>{
              if(error){
                this.btnDisable = false
              }
            });
          }
          return;
        }
      }
    },
  },
};
</script>
<style lang="scss">
.detail_form_item {
  margin-top: 5px;
  padding-left: 10%;
}

.detailRow {
  margin-top: 20px;
  max-height: 550px;
  overflow-y: auto;
}

.create-url {
  width: 82%;
  height: 175px;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #f0f2f5;
  background-color: #f0f2f5;
  border-radius: 9px;
}

.creative_border {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.creative_item {
  width: 48%;
  border: 2px solid #f0f2f5;
  background-color: #f0f2f5;
  border-radius: 9px;
  margin-top: 20px;
}

.create-detail {
  width: 82%;
  margin: 10px auto;
}

.basicInfo_table_title {
  height: 26px;
  line-height: 26px;
  border: 1px solid #ebeef5;
  background-color: #fafafa;
  font-weight: 600;
}

.basicInfo_table_column {
  height: 26px;
  line-height: 26px;
  border: 1px solid #ebeef5;
}
</style>
